﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title></title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
    <link href="../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
    <script type="text/javascript" src="../Scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../Scripts/config.js"></script>
    <script type="text/javascript" src="../Comm/Gener.js"></script>
    <script type="text/javascript" src="../Scripts/QueryString.js"></script>
    <script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="../Scripts/layui/layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=7db4dab570f2d221062d9a628daaa373&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geolocation"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>

        #container {
            width: 760px;
            height: 400px;
        }

        input {
            width: 20px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div class="info">
        <!--<h4 id='status'></h4><hr>
        <p id='result'></p><hr>
        <p id='address'></p><hr>
        <p>由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。</p>-->
    </div>
    
    <div id="myPageTop">
        <table>
            <tr>
                <td>
                    <label>请输入关键字：</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="tipinput" class="layui-input"/>
                </td>
            </tr>
        </table>
    </div>
    <hr />
    <div style="margin-top:400px">
        <form class="layui-form" action="">
            <div class="layui-row">
                <div class="layui-col-xs6 layui-col-sm6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">地址名称:</label>
                        <div class="layui-input-block">
                            <input type="text" id="addName" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">详细地址:</label>
                        <div class="layui-input-block">
                            <input type="text" id="addDetails" class="layui-input" />
                        </div>
                    </div>
                    <input type="hidden" style="width:200px" id="addLat" />
                    <input type="hidden" style="width:200px" id="addLng" />

                </div>
                <div class="layui-col-xs6 layui-col-sm3 " style="text-align:right;vertical-align:bottom;padding-top:33px">

                    <button type="button" class="layui-btn layui-btn-sm" id="commit">提交</button>&nbsp;&nbsp;
                    <button type="button" class="layui-btn  layui-btn-sm" id="close">关闭</button>

                </div>
            </div>
           
        </form>
    </div>
    <script type="text/javascript">

        var AtPara = GetQueryString("Paras");//获取地址名称@详细地址@纬度@经度
        var KeyOfEn = GetQueryString("KeyOfEn");
        var FK_Node = GetQueryString("FK_Node");
        var WorkID = GetQueryString("WorkID");
        var isReadonly = GetQueryString("IsReadonly");//是否可编辑
        if (isReadonly !== null && isReadonly!=undefined&&isReadonly=="1") {

            $("#commit").prop("disabled", true); // 当不可编辑时，提交按钮禁用
        }
        var addLat;//纬度坐标
        var addLng;//经度坐标
        //给各控件赋值
        if (AtPara != "" && AtPara != 'undefined' && AtPara != null) {
            var paras = AtPara.split("@");
            addLat =  paras[2];
            addLng = paras[3];
            $("#addName").val(paras[0]);
            $("#addDetails").val(paras[1]);
            $("#addLat").val(paras[2]);
            $("#addLng").val(paras[3]);
        }
        //地图加载
        var map = new AMap.Map("container", {
            resizeEnable: true,//是否监控地图容器尺寸变化
            zoom: 18, //初始地图级别
        });
        //当有保存的数据时，定位到保存的中心点
        if (addLat != undefined && addLng != undefined) {

            map.setCenter([addLng, addLat]);
            //添加mark
            var marker = new AMap.Marker();
            map.add(marker);
            marker.setPosition([addLng,addLat]);//设置标记的位置
        }
         
        //输入提示
        var autoOptions = {
            input: "tipinput"
        };
        var auto = new AMap.Autocomplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            map: map,
            showCover: true
        });  //构造地点查询类
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
        };
        //监听搜索后的mark点击事件，点击填充地址名称等控件
        AMap.event.addListener(placeSearch,"markerClick",eventHandler);
        function eventHandler(e) {
            var poiid = e.id;
            var data = e.data;
            placeSearch.getDetails(poiid, function(status, result) {
                // 查询成功时，result即为对应的POI详情
                 var name = result.poiList.pois[0].name;
                 var address = result.poiList.pois[0].address;
                 var addLat = result.poiList.pois[0].location.lat;
                 var addLng = result.poiList.pois[0].location.lng;
                 $("#addName").val(name);
                 $("#addDetails").val(address);
                 $("#addLat").val(addLat);
                 $("#addLng").val(addLng);
            })
        }
        //提交
         $("#commit").click(function () {
             var addName = $("#addName").val();//地址名称
             var addDetails = $("#addDetails").val();//详细地址
             var addLat =  $("#addLat").val();//纬度
             var addLng = $("#addLng").val();//经度
             var str = addName + "@" + addDetails + "@" + addLat + "@" + addLng;
             if (addName != "") {
                  parent.document.getElementById("TB_AtPara").value = str;//地址名称@详细地址@纬度@经度
                 parent.document.getElementById("TB_" + KeyOfEn).value = addName;  //给表单地图控件赋值
                 parent.layer.close(parent.layer.index);
                // if (window.parent != null && window.parent.CloseBootstrapDialog != null) {
                //    window.parent.CloseBootstrapDialog();
                //}
             } else {
                 alert("地址名称不能为空!");
             }
            
	     });
        //关闭
        $("#close").click(function () {
            layer.close(layer.index);
            //if (window.parent != null && window.parent.CloseBootstrapDialog != null) {
            //    window.parent.CloseBootstrapDialog();
            //}
	    });
        
    </script>
</body>
</html>